<template>
  <div class="top">
    <el-row class="fitersLine">
      <el-col :span="24">
        <el-form :inline="true" size="small">
          <el-form-item label="执行器" lable-width="auto">
            <el-select v-model="tableQuery.jobGroup" placeholder="请选择" @change="groupChange"
                       filterable>
              <el-option
                v-for="item in groupListData"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
<!--          运行状态-->
          <el-form-item label="" width="auto" class="triggerCondition">
            <el-select v-model="tableQuery.triggerStatus" placeholder="请选择">
<!--              <el-option label="全部" value=-1 key=-1></el-option>-->
              <el-option
                v-for="(item) in triggerStatusEnum"
                :key="item.val"
                :label="item.title"
                :value="item.val">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="tableQuery.jobDesc" placeholder="请输入任务描述" clearable></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="tableQuery.executorHandler" placeholder="请输入JobHandler" clearable></el-input>
          </el-form-item>
          <el-form-item label="" >
            <el-input v-model="tableQuery.author" placeholder="请输入负责人" clearable></el-input>
          </el-form-item>
          <el-form-item class="searchBtn">
            <el-button type="primary" @click="getJobList">查询</el-button>
          </el-form-item>
          <el-button class="filter-item" style="margin-left: 10px;" @click="jobCreate" size="small"
                     :type="pageBoolean.addColor" icon="el-icon-plus">{{ pageBoolean.addText }}
          </el-button>
        </el-form>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="jobList"
      :default-sort="{prop: 'triggerStatus', order: 'descending'}"
      v-loading="listLoading"
      element-loading-text="数据加载中，请稍后"
      border
      fit
      :highlight-current-row='false'
      style="width: 100%">
      <el-table-column label="任务ID" align="center" min-width="30" prop="id">
        <template slot-scope="scope"> {{scope.row.id}}</template>
      </el-table-column>
      <el-table-column align="center" prop="jobDesc" label="任务描述" min-width="100">
        <template slot-scope="scope"> {{scope.row.jobDesc}}</template>
      </el-table-column>
      <el-table-column align="center" prop="gulueType" label="调度类型" min-width="100">
        <template slot-scope="scope"> {{scope.row.glueType}}: {{scope.row.executorHandler}}</template>
      </el-table-column>
      <el-table-column align="center" prop="schedule" label="运行模式" min-width="60">
        <template slot-scope="scope">{{scope.row.scheduleType}}: {{scope.row.scheduleConf}}</template>
      </el-table-column>
      <el-table-column align="center" prop="author" label="负责人" min-width="50">
        <template slot-scope="scope"> {{scope.row.author}}</template>
      </el-table-column>
      <el-table-column align="center" prop="triggerStatus" label="状态" min-width="40"
                       :filters="[{ text: 'RUNNING', value: 1 }, { text: 'STOP', value: 0 }]"
                       :filter-method="filterTriggerStatus"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag size="small"
            :type="scope.row.triggerStatus === 0 ? 'info' : 'success'"
            disable-transitions v-html="formatTriggerStatus(scope.row.triggerStatus)" ></el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="操作" show-overflow-tooltip min-width="60">
        <template slot-scope="scope">
          <el-dropdown size="small" trigger="click" split-button type="primary" @command="(command)=>{handleRowOp(command,scope.row)}">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="beforeRunOnce">执行一次</el-dropdown-item>
              <el-dropdown-item command="">查询日志</el-dropdown-item>
              <el-dropdown-item command="regNode">注册节点</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.scheduleType == 'CRON' || scope.row.scheduleType == 'FIX_RATE'" command="nextTriggerTime">下次执行时间</el-dropdown-item>

              <div v-if="scope.row.glueType.search('GLUE') == 0">
                <hr>
                <el-dropdown-item command="openGlueIde">GLUE IDE</el-dropdown-item>
              </div>
              <hr>
              <el-dropdown-item command="startOrStop">{{scope.row.triggerStatus===0?'启动':'停止'}}</el-dropdown-item>
              <el-dropdown-item command="editJob">编辑</el-dropdown-item>
              <el-dropdown-item command="deleteJob">删除</el-dropdown-item>
              <el-dropdown-item command="copyJob">复制</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="space-between" style="padding-top:20px;">
      <el-col style="text-align:right;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="tableQuery.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="tableQuery.length"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>

<!--    dialog    -->
    <el-dialog width="60%" id="jobFormDialog" :title="formDialogType=='create' ? '新增任务' : '编辑任务'" :visible.sync="dialogFormVisible" center>
      <el-form :model="jobForm" :rules="rules" ref="jobForm" label-width="100px" size="small">
        <div>
          <form-group group-name="基础配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行器" prop="jobGroup">
              <el-select v-model="jobForm.jobGroup" placeholder="请选择">
                <el-option v-for="item in groupListData"
                           :key="item.id"
                           :label="item.title"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="author">
              <el-input v-model="jobForm.author" placeholder="请输入负责人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务描述" prop="jobDesc">
              <el-input v-model="jobForm.jobDesc" label="请输入任务描述"></el-input>
            </el-form-item>
            <el-form-item label="报警邮件" prop="alarmEmail">
              <el-input v-model="jobForm.alarmEmail" label="请输入任务描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div>
            <form-group group-name="调度配置"/>
          </div>
          <el-col :span="12">
            <el-form-item label="调度类型" prop="glueType">
              <el-select v-model="jobForm.scheduleType" placeholder="请选择">
                <el-option v-for="item in scheduleTypeEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="jobForm.scheduleType != 'NONE'">
            <el-form-item :label="jobForm.scheduleType === 'CRON' ? 'CRON' : '固定速度'" prop="scheduleConf">
              <el-input v-model="jobForm.scheduleConf" label="请输入Cron"></el-input>


              <el-popover v-model="showCron">
                <el-input slot="reference" @click="cronPopover=true"
                          v-model="cron" placeholder="请输入定时策略"
                          style="width: 40% ;margin-left: -50%">
                </el-input>
                <vueCron @change="changeCronHandle" @close="cronPopover=false" i18n="cn" />
              </el-popover>
            </el-form-item>
          </el-col>

        </el-row>
        <div>
          <form-group group-name="任务配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运行模式" prop="glueType">
              <el-select v-model="jobForm.glueType" placeholder="请选择" :disabled="formDialogType=='update'">
                <el-option v-for="item in glueTypeEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="JobHandler" prop="executorHandler">
              <el-input v-model="jobForm.executorHandler" label="executorHandler" :disabled="jobForm.glueType != null && jobForm.glueType.search('GLUE') === 0"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="任务参数" prop="executorParam">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="jobForm.executorParam">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="chart-wrapper">
          <form-group group-name="高级配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="路由策略" prop="misfireStrategy">
              <el-select v-model="jobForm.executorRouteStrategy" placeholder="请选择">
                <el-option v-for="item in routeStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调度过期策略" prop="misfireStrategy">
              <el-select v-model="jobForm.misfireStrategy" placeholder="请选择">
                <el-option v-for="item in failStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务超时时间" prop="executorTimeout">
              <el-input v-model.number="jobForm.executorTimeout" placeholder="请输入超时时间，单位秒，大于零时生效"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子任务ID" prop="childJobId">
              <el-input v-model="jobForm.childJobId" placeholder="请输入子任务的ID,如果存在多个则逗号分隔"></el-input>
            </el-form-item>
            <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
              <el-select v-model="jobForm.executorBlockStrategy" placeholder="请选择">
                <el-option v-for="item in blockStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="失败重试次数" prop="executorFailRetryCount">
              <el-input v-model.number="jobForm.executorFailRetryCount" placeholder="重试次数，大于零时生效"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button v-if="formDialogType=='create'" type="primary" @click="executorAddForm" size="small">新 增</el-button>
        <el-button v-else type="primary" @click="executorUpdateForm" size="small">更 新</el-button>
      </div>
    </el-dialog>

    <el-dialog width="50%" id="runOnceDialog" title="执行一次" :visible.sync="runOnceDialogVisible" center>
      <el-form :model="runOnceForm" ref="runOnceForm" label-width="80px" size="small">
        <el-row>
          <el-col :span="22">
            <el-form-item label="任务参数" prop="executorParam">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="runOnceForm.executorParam">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="机器地址" prop="addressList">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="runOnceForm.addressList">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="runOnce">执 行</el-button>
        <el-button @click="runOnceDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import qs from 'qs';
  import {getGroupList,groupDetail} from "../../api/group";
  import FormGroup from "./components/FormGroup";
  import VueCron from 'vue-cron';
  import {create, getJobPageList, jobStop, jobStart, jobTrigger, remove, update,nextTriggerTime} from "../../api/jobinfo";

  export default {
    name: 'JobsList',
    components:{
      FormGroup,
      VueCron
    },
    watch:{
    },
    data() {
      return {
        showCron: false,
        cron:'',

        formDialogType: '',
        groupListData: [],
        //禁用jobhandler，仅在
        disableJobHandler: false,
        //运行模式枚举
        glueTypeEnum: [{val: 'BEAN',title: 'BEAN'},{val: 'GLUE_GROOVY',title:'GLUE(Groovy)'},
          {val:'GLUE_SHELL',title:'GLUE(Shell)'},{val:'GLUE_PYTHON',title:'GLUE(Python)'},{val:'GLUE_PHP',title:'GLUE(PHP)'},
          {val:'GLUE_NODEJS',title:'GLUE(NodeJs)'},{val:'GLUE_POWERSHELL',title:'GLUE(PowerShell)'}],
        //调度模式枚举
        scheduleTypeEnum: [{val:'NONE',title:'无'},{val: 'CRON',title: 'CRON'},{val: 'FIX_RATE',title: '固定速度'}],
        routeStrategyEnum: [{val:'FIRST',title:'第一个'},{val:'LAST',title:'最后一个'},
          {val:'ROUND',title:'轮询'},{val:'RANDOM',title:'随机'},
          {val:'CONSISTENT_HASH',title:'一致性HASH'},{val:'LEAST_FREQUENTLY_USED',title:'最不经常使用'},
          {val:'LEAST_RECENTLY_USED',title:'最近最久未使用'},{val:'FAILOVER',title:'故障转移'},
          {val:'BUSYOVER',title:'忙碌转移'},{val: 'SHARDING_BROADCAST',title:'分片广播'}],
        blockStrategyEnum: [{val:'SERIAL_EXECUTION',title:'单机串行'},{val:'DISCARD_LATER',title:'丢弃后续调度'},
          {val:'COVER_EARLY',title:'覆盖之前调度'}],
        failStrategyEnum: [{val:'DO_NOTHING',title:'忽略'},{val:'FIRE_ONCE_NOW',title:'立即执行一次'}],
        triggerStatusEnum: [{val:-1,title:'全部'},{val: 1, title: 'RUNNING'},{val: 0, title: 'STOP'}],

        total: null,
        jobList: null,
        listLoading: true,

        dialogFormVisible: false,
        runOnceDialogVisible: false,

        tableQuery: {
          jobGroup: null,
          triggerStatus: -1,
          jobDesc: '',
          executorHandler: '',
          author: '',
          length: 10,
          start: 0,
          currentPage: 1
        },
        //执行器查询
        groupQuery: {
          title: '',
          start: 0,
          length: 100
        },
        jobForm: {
          id: null,
          //执行器
          jobGroup: null,
          //负责人
          author: '',
          //任务描述
          jobDesc: '',
          alarmEmail: '',
          //调度类型
          scheduleType: '',
          scheduleConf: '',
          //运行模式
          glueType: null,
          //jobHandler
          executorHandler: '',
          //任务参数
          executorParam: '',
          //路由策略
          executorRouteStrategy: '',
          //调度过期策略
          misfireStrategy: '',
          //任务超时时间
          executorTimeout: null,
          childJobId: null,
          //阻塞处理策略
          executorBlockStrategy: '',
          //失败重试次数
          executorFailRetryCount: null
        },
        rules: {
          jobGroup: [{required: true, message: '请选择执行器', trigger: 'blur'}],
          author: [{required: true, message: '请输入负责人', trigger: 'blur'}],
          jobDesc: [{required: true, message: '请输入任务描述', trigger: 'blur'}],

          scheduleType: [{required: true, message: '请选择调度类型', trigger: 'blur'}],
          scheduleConf: [{required: true, message: '请输入Cron表达式', trigger: 'blur'}],

          glueType: [{required: true, message: '请选择运行模式', trigger: 'blur'}],
          executorHandler: [{required: true, message: '请输入执行器BEAN名称', trigger: 'blur'}],

          misfireStrategy: [{required: false, message: '请选择失败策略', trigger: 'blur'}],
          alarmEmail: [{required: false, message: '请输入邮箱地址', trigger: 'blur'}, {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }],
        },
        runOnceForm: {
          id: null,
          //任务参数
          executorParam: '',
          addressList: ''
        },

        registerAddrList:[],
        pageBoolean: {
          delColor: 'primary',
          delText: '批量删除',
          addColor: 'success',
          addText: '添加任务'
        },
        operateText: ['执行', '暂停', '删除'],
      };
    },
    mounted() {
      // this.initEnums()
      this.fetchGroupList()
    },
    methods: {
      // initEnums(){
      //   jobEnums().then(res => {
      //     const {data, recordsTotal} = re
      //   })
      // },
      //获取执行器
      fetchGroupList(){
        getGroupList(qs.stringify(this.groupQuery)).then(res => {
          this.$nextTick(() => {
            const {data, recordsTotal} = res
            this.groupListData = data
            if (recordsTotal === 0) {
              this.$message({
                message: '执行器列表为空,需要先创建执行器',
                type: 'warning'
              })
              return
            }
            this.tableQuery.jobGroup = data[0].id
            this.jobForm.jobGroup = data[0].id
//回调获取job
            this.getJobList()
          })
        }).catch(function (err) {
          console.log(err)
        })
      },
      //任务列表
      getJobList() {
        getJobPageList(qs.stringify(this.tableQuery)).then(res => {
          const {data, recordsTotal} = res
          this.total = recordsTotal
          this.jobList = data
          // if (recordsTotal === 0) {
          //   this.$message({
          //     message: '未找到符合条件的任务任务',
          //     type: 'warning'
          //   })
          // }
          this.listLoading = false
        }).catch(reject => {
          this.listLoading = false;
        });
      },
      refreshJobList(){
        this.tableQuery.start = 0
        this.tableQuery.currentPage=1
        this.getJobList()
      },
      //操作按钮处理函数，根据操作类型再进行分发
      handleRowOp(op, row){
        switch (op) {
          case 'jobCreate': {
            this.jobCreate()
            break
          }
          case 'editJob': {
            this.editJob(row)
            break
          }
          case 'beforeRunOnce':{
            this.beforeRunOnce(row)
            break
          }
          case 'regNode': {
            this.regNode(row.id)
            break
          }
          case 'nextTriggerTime': {
            this.nextTriggerTime(row.scheduleType,row.scheduleConf)
            break
          }
          case 'startOrStop':{
            this.startOrStop(row)
            break
          }
          case 'deleteJob':{
            this.deleteJob(row.id)
            break
          }
          case 'copyJob':{
            this.copyJob(row)
            break
          }
          case 'openGlueIde':{
            this.openGlueIde(row.id)
            break
          }
        }
      },
      jobCreate() {
        this.jobForm = {
          id: null,
          jobGroup: null,
          executorRouteStrategy: 'RANDOM',
          scheduleType: 'CRON',
          glueType: 'BEAN',
          executorParam: '',
          executorBlockStrategy: 'SERIAL_EXECUTION',
          executorTimeout: 0,
          author: '',
          jobDesc: '',
          scheduleConf: '',
          executorHandler: '',
          childJobId: null,
          misfireStrategy: 'DO_NOTHING',
          alarmEmail: ''
        }
        this.dialogFormVisible = true
        this.formDialogType = 'create'
      },
      //新增任务
      executorAddForm() {
        this.$refs['jobForm'].validate((valid) => {
          if (valid) {
            delete this.jobForm.id
            create(qs.stringify(this.jobForm)).then(res => {
              if (res.code === 200) {
                this.dialogFormVisible = false
                this.$message({
                  message: "新增成功",
                  type: 'success'
                })
                this.refreshJobList()
              } else {
                this.$message(res.msg)
              }
            }).catch(function (err) {
              console.log(err.message)
            })
          } else {
            return false;
          }
        });
      },
      editJob(row) {
        // console.info('编辑任务',row)
        this.dialogFormVisible = true
        this.formDialogType = 'update'
        this.jobForm = row
        delete this.jobForm.addTime
        delete this.jobForm.glueUpdatetime
        delete this.jobForm.updateTime
        //删除调度状态
        delete this.jobForm.triggerStatus
        //清除创建时产生的校验提示
        this.$refs.jobForm.clearValidate()
      },
      //修改任务
      executorUpdateForm() {
        this.$refs['jobForm'].validate((valid) => {
          if (valid) {
            if (this.jobForm.executorFailRetryCount == null){
              this.jobForm.executorFailRetryCount = 0
            }
            if (this.jobForm.executorTimeout == null){
              this.jobForm.executorTimeout = 0
            }
            update(qs.stringify(this.jobForm)).then(res => {
              if (res.code === 200) {
                this.dialogFormVisible = false
                this.$message({
                  message: "更新成功",
                  type: 'success'

                })
                this.refreshJobList()
              } else {
                this.$message(res.msg)
              }
            }).catch(function (err) {
              console.log(err.message)
            })
          } else {
            return false;
          }
        });
      },
      beforeRunOnce(row){
        this.runOnceForm.id = row.id
        this.runOnceForm.executorParam=row.executorParam
        this.runOnceDialogVisible=true
      },
      runOnce(){
        jobTrigger(qs.stringify(this.runOnceForm)).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "触发成功",
              type: 'success'
            })
          } else {
            this.$message(res.msg)
          }
        }).catch(function (err) {
          this.$message(err)
        })
        this.runOnceDialogVisible=false
      },
      regNode(id) {
        groupDetail(id).then(res => {
          let innerHtml = ''
          if (res.code === 200) {
            let registryList = res.content.registryList
            for (const index in registryList) {
              innerHtml = innerHtml + '<span class="onlineNode">' + (Number(index) + 1) + '. ' + registryList[index] + '</span>'
            }
          }
          this.$alert(innerHtml, '注册节点', {
            dangerouslyUseHTMLString: true
          });
        })
      },
      nextTriggerTime(scheduleType,scheduleConf){
        nextTriggerTime(scheduleType,scheduleConf).then(res => {
          let innerHtml= ''
          if(res.code === 200){
            let triggerTimeList = res.content
            for (const index in triggerTimeList) {
              innerHtml = innerHtml+'<span class="triggerTimeList">'+triggerTimeList[index]+'</span></br>'
            }
          }
          this.$alert(innerHtml, '下次执行时间', {
            dangerouslyUseHTMLString: true,
            center: true
          });
        })
      },
      startOrStop(row) {
        let status = row.triggerStatus
        let statusDesc = status === 1 ? '停止' : '启动'
        //当前运行，暂停
        this.$confirm('确认' + statusDesc + '该任务？','提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }
        ).then(res => {
          if (status === 1) {
            jobStop(row.id).then(res => {
              if(res.code === 200){
                this.$message({message:'操作成功',type:'success'})
                this.refreshJobList()
              }else{
                this.$message({message:res.msg,type:'error'})
              }
            })
          } else if (status === 0) {
            jobStart(row.id).then(res => {
              if(res.code === 200){
                this.$message({message:'操作成功',type:'success'})
                this.refreshJobList()
              }else{
                this.$message({message:res.msg,type:'error'})
              }
            })
          }
        }).catch(reject => console.log(reject))
      },
      deleteJob(id) {
        this.$confirm('确认删除该任务？','提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warn'
          }
        ).then(res => {
          remove(id).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "删除成功",
                type: 'success'
              })
              this.refreshJobList()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          }).catch(function (err) {
            this.$message(err)
          })
        }).catch(reject => console.log(reject))
      },
      copyJob(row){
        this.jobForm = row
        delete this.jobForm.addTime
        delete this.jobForm.updateTime
        delete this.jobForm.glueUpdatetime
        delete this.jobForm.triggerLastTime
        delete this.jobForm.triggerNextTime
        delete this.jobForm.glueSource
        delete this.jobForm.glueRemark
        this.formDialogType='create'
        this.dialogFormVisible = true
      },
      openGlueIde(){
        this.$alert('该功能尚在开发', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      },

      filterTriggerStatus(value, row) {
        return row.triggerStatus === value;
      },
      formatTriggerStatus(status){
        return status === 1 ? 'RUNNING' : 'STOP'
      },
      handleSizeChange(val) {
        this.tableQuery.length = val
        this.tableQuery.start = 0
        this.getJobList()
      },
      handleCurrentChange(val) {
        this.tableQuery.start = (val - 1) * this.tableQuery.length
        this.tableQuery.currentPage = val
        this.getJobList()
      },
      changeCronHandle(val){
        this.jobForm.scheduleConf=val
      },
      groupChange(item){
        this.tableQuery.jobGroup = item
        this.jobForm.jobGroup = item
        //触发查询
        // this.refreshJobList()
      },
    },
    computed: {
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" slot-scope>
  .top {
    padding: 10px;
  }

  .fitersLine {
    .el-form-item__content {
      margin-left: 0 !important;
      width: 130px !important;
    }
    .el-form-item__label {
      min-width: auto !important;
    }
    .searchBtn{
      width: 60px !important;
    }
  }
  .el-dialog--center .el-dialog__body{
    padding: 0px 25px 0px;
  }
  .triggerCondition{
    .el-form-item__content {
      width: 100px !important;
    }
  }

  .el-table .cell {
    line-height: 1;
    padding: 0 3px;
  }
  .el-dialog{
    max-width: 642px;
  }

  .onlineNode{
    background-color: springgreen;
    border-radius: 10px;
    padding: 3px 10px;
  }
  .triggerTimeList{
    margin-left: 20%;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .el-button--mini {
    padding: 7px 10px;
  }

  .el-button + .el-button {
    margin-left: 1px;
  }

  .el-upload {
    text-align: left
  }


  .el-dialog__header {
    padding-bottom: 0;
  }

  .el-steps--simple {
    margin: 10px 0;
  }

  .border-none {
    input {
      border: none;
      padding: 0;
      text-align: center;
      &:focus {
        border: 1px solid #dcdfe6
      }
    }
  }

  .el-table--enable-row-hover {
    .el-table__body {
      tr:hover > td {
        background: transparent;
      }
    }
  }

</style>
